<template>
  <ElSplitter v-if="active === 'property'">
    <ElSplitterPanel collapsible class="p5px">
      <HomePropsEditor :name="name" v-model="data" />
      <PopupPropsEditor v-if="data.mode === 'popup'" v-model="popupProps" />
      <ElDescriptions border :column="column" class="mt5px">
        <ElDescriptionsItem label="类型" :min-width="150">【{{actionTypeOptions[data.type]}}】</ElDescriptionsItem>
        <ElDescriptionsItem v-if="!isSeedAction" label="模块" :min-width="100">
          <ElSelect v-model="data.seedName">
            <ElOption label="无" value="" />
            <ElOption v-for="(seed, seedName) in seeds" :label="seed.label" :value="seedName" :key="seedName" />
          </ElSelect>
        </ElDescriptionsItem>
        <ElDescriptionsItem v-if="seedName && isSetAction" label="申明">
          <DeclareEditor :seed-name="seedName" v-model="data.declare" />
        </ElDescriptionsItem>
        <ElDescriptionsItem v-if="seedName && isSetAction" label="申明值">
          <el-input v-model="data.declareValue" />
        </ElDescriptionsItem>
      </ElDescriptions>
      <!-- <ElDescriptions v-if="seedName && isListAction" border :column="column" class="mt5px">
        <ElDescriptionsItem label="工具栏操作" :span="column">
          <OperateEditor v-model="data.toolbar" :seed-name="seedName" />
        </ElDescriptionsItem>
        <ElDescriptionsItem label="行操作" :span="column">
          <OperateEditor v-model="data.row" :seed-name="seedName" />
        </ElDescriptionsItem>
      </ElDescriptions> -->
      <ElDescriptions border :column="column" class="mt5px">
        <ElDescriptionsItem v-if="seedName" label="申明" :span="column">
          <DeclaresEditor v-model="data.declares" :seed-name="seedName" :key="seedName" />
        </ElDescriptionsItem>
        <ElDescriptionsItem v-if="seedName" label="条件" :span="column">
          <SearchesEditor v-model="data.searches" :seed-name="seedName" :key="seedName" />
        </ElDescriptionsItem>
        <ElDescriptionsItem v-if="seedName" label="排序" :span="column">
          <OrdersEditor v-model="data.orders" :seed-name="seedName" :key="seedName" />
        </ElDescriptionsItem>
      </ElDescriptions>
      <ElDescriptions v-if="active === 'property'" border :column="column" class="mt5px">
        <ElDescriptionsItem label="是否检查登录">
          <ElSwitch v-model="data.checkLogin" />
        </ElDescriptionsItem>
        <ElDescriptionsItem label="是否功能权限">
          <ElSwitch v-model="data.checkAction" />
        </ElDescriptionsItem>
        <ElDescriptionsItem label="是否数据权限">
          <ElSwitch v-model="data.checkData" />
        </ElDescriptionsItem>
        <ElDescriptionsItem label="是否字段权限">
          <ElSwitch v-model="data.checkField" />
        </ElDescriptionsItem>
        <ElDescriptionsItem label="是否关键字">
          <ElSwitch v-model="data.useKeyword" />
        </ElDescriptionsItem>
      </ElDescriptions>
    </ElSplitterPanel>      
    <ElSplitterPanel collapsible class="p5px">
      <div class="bg-green flex items-center h30px pl5px color-#FFF">申明元素</div>
      <ActionElementList :seed-name="props.seedName" :action-name="props.actionName" />
      <div class="bg-green flex items-center h30px pl5px color-#FFF mt10px">统计</div>
      <StatList :seed-name="props.seedName" :action-name="props.actionName" />
    </ElSplitterPanel>
  </ElSplitter>
  <ComponentEditor v-if="active === 'component'" :type="data.type" v-model:component="data.component" v-model:component-props="data.componentProps" />
  <LayoutEditor v-if="active === 'layout'" v-model="data.layout" />
</template>
<script lang="ts" setup>
  import { active, getAction, getSeed, getSeeds } from '@/views/seed-dev'
  import { ElInput, ElSelect, ElOption, ElSwitch, ElDescriptions, ElDescriptionsItem, ElSplitter, ElSplitterPanel } from 'element-plus'
  import { ComponentEditor } from '../../ComponentEditor';
  import { LayoutEditor } from '../../LayoutEditor';
  import { computed, ref, watch } from 'vue';
  import { actionTypeOptions } from '@/views/types';
  import { save } from '..';
  import { SearchesEditor } from '../../SearchesEditor';
  import { OrdersEditor } from '../../OrdersEditor';
  import { DeclaresEditor, DeclareEditor } from '../../DeclarsEditor';
  import { HomePropsEditor } from '../../HomeEditor';
  import { PopupPropsEditor } from '../../PopupPropsEditor';
  import { ActionConfiguration } from '@/views/dev-types';
  import { StatList } from '../../StatEditor';
  import { ActionElementList } from '../../ActionElementEditor';

  const props = defineProps<{seedName?: string, actionName: string}>()
  const isSeedAction = computed(() => !!props.seedName)
  const isSetAction = computed(() => 'set' === data.value.type)

  const seedName = computed(() => props.seedName || data.value.seedName)
  const seeds = computed(() => isSeedAction.value ? void 0 : getSeeds())
  const column = 2

  // const columns = computed((): any[] => {
  //   let seed: SeedConfiguration
  //   if(isSeedAction.value) {
  //     seed = getSeed(props.seedName)
  //   } else {
  //     const action = getAction(props.actionName)
  //     if(!action.seedName) return []

  //     seed = getSeed(action.seedName)
  //   }

  //   const ret = []
  //   for(const declare in data.value.columns) {
  //     const column = getRawColumn(seed, declare)
  //     const declareColumn = data.value.columns[declare]
  //     ret.push({...declareColumn, name: declare, type: column.type})
  //   }

  //   return ret
  // })

  // function addColumn() {
  //   open({title: '新增列'}, ActionColumnCreator, { seedName: props.seedName, actionName: props.actionName })
  // }

  // function batchAddColumn() {
  //   open({title: '批量重写列'}, ActionColumnBatchCreator, { seedName: props.seedName, actionName: props.actionName })
  // }

  // function editColumn(declare: string) {
  //   open({title: '编辑列'}, ActionColumnEditor, { seedName: props.seedName, actionName: props.actionName, declare })
  // }

  // function editColumnElement(declare: string) {
  //   open({title: '编辑列元素', fullscreen: true}, ActionColumnElementEditor, { seedName: props.seedName, actionName: props.actionName, declare })
  // }

  // function removeColumn(columnName: string) {
  //   if(isSeedAction.value) {
  //     const seed = getSeed(props.seedName)
  //     delete seed.actions[props.actionName].columns[columnName]
  //     return
  //   }

  //   delete getAction(props.actionName).columns[columnName]
  // }

  function getInitData() {
    if(!props.actionName) return {}

    if(isSeedAction.value) {
      const seed = getSeed(props.seedName)
      return seed.actions?.[props.actionName]
    }

    return getAction(props.actionName)
  }

  const name = ref<string>(props.actionName)
  const data = ref<ActionConfiguration>(getInitData())
  const popupProps = ref(data.value.popupProps || {})

  watch(() => data.value, () => save(name.value, data.value, props.seedName), { deep: true })
  watch(() => popupProps.value, (val) => data.value.popupProps = val, { deep: true })
</script>
<style lang="less" scoped>
  :deep(.is-bordered-label) {
    width: 120px;
  }
</style>